<template>
  <div id="app">
    <div @mouseenter="flag = true" @mouseleave="flag = false" class="phonetip">
      <!-- 悬浮窗 -->
      <div v-if="flag" class="tipxf"></div>
    </div>
    <router-view />
  </div>
</template>

<script>
import storage from "@/plugins/storage";
import { getBaseSite } from "@/api/common.js";
export default {
  name: "App",
  data() {
    return {
      flag: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getSite();
      if (
        !storage.getItem("siteName") ||
        !storage.getItem("logoImg") ||
        !storage.getItem("sitelogo_expiration_time")
      ) {
        this.getSite();
      } else {
        // 如果缓存过期，则获取最新的信息
        if (new Date() > storage.getItem("sitelogo_expiration_time")) {
          this.getSite();
          return;
        } else {
          window.document.title = "半价尚品购物平台";
          // 动态获取icon
          let link =
            document.querySelector("link[rel*='icon']") ||
            document.createElement("link");
          link.type = "image/x-icon";
          link.href = storage.getItem("siteIcon");
          link.rel = "shortcut icon";
          document.getElementsByTagName("head")[0].appendChild(link);
        }
      }
    },
    getSite() {
      //获取基本站点信息
      getBaseSite().then((res) => {
        if (res.success && res.result.settingValue) {
          let data = JSON.parse(res.result.settingValue);
          console.log(data, 1111111);

          // 过期时间
          var expirationTime = new Date().setHours(new Date().getHours() + 1);
          // 存放过期时间
          storage.setItem("sitelogo_expiration_time", expirationTime);
          // 存放信息
          storage.setItem("siteName", data.siteName);
          storage.setItem("logoImg", data.buyerSideLogo);
          storage.setItem("siteIcon", data.buyerSideIcon);
          window.document.title = '半价尚品购物平台';
          //动态获取icon
          let link =
            document.querySelector("link[rel*='icon']") ||
            document.createElement("link");
          link.type = "image/x-icon";
          link.href = data.buyerSideIcon;
          link.rel = "shortcut icon";
          document.getElementsByTagName("head")[0].appendChild(link);
        }
      });
    },
  },
};
</script>
<style lang="scss">
#app {
  @include background_color($light_background_color);
}
.phonetip {
  width: 80px;
  height: 80px;
  background: url("./assets/img/logo.png") no-repeat #ff4c4c;
  background-size: 100% 100%;
  box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.1),
    -4px -4px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px 8px 8px 8px;
  position: fixed;
  right: 24px;
  bottom: 223px;
  z-index: 999;
  cursor: pointer;
}
.tipxf {
  position: absolute;
  right: 88px;
  top: -28px;
  width: 296px;
  height: 138px;
  background: url("./assets/img/xuanf.png") no-repeat;
  background-size: 100% 100%;
}
</style>
